import React from "react";
import "./App.css";
// jsx
// 组件分类： 函数组件, 类组件
class App extends React.Component {
  state = {
    message: "APP 类组件,  知识很简单，方法有很多，学习很快乐",
    title: "非常开心， 学习react",
    list: ["a", "b", "c", "d", "e", "f", "g"],
    list1: [
      {
        name: "张三",
        age: 18,
        sex: "男",
      },
      {
        name: "小丽",
        age: 19,
        sex: "女",
      },
    ],

    flag: false,
    show: false
  };


  render() {
    // 解构数据
    const { message, title, list, list1, flag, show } = this.state;
    return (
      <div>
        <div>App 类组件</div>
        {/* // 绑定值, 类名 使用 className  */}
        <div title={title} className="active active1">
          {message}
        </div>
        {/* // 循环渲染 */}
        <ul>
          {list.map((v, i) => {
            return <li key={i}>{v}</li>;
          })}
        </ul>
        <hr />
        <ul>
          {list1.map((v, i) => {
            return (
              <li key={i}>
                姓名：{v.name} 年龄：{v.age} 性别：{v.sex}
              </li>
            );
          })}
        </ul>
        {/* 条件渲染 */}
        {flag && <div>哈哈哈， 别睡觉</div>}
        <hr />
        {/* 条件渲染： 操作css */}
        <div style={{ display: show ? 'block' : 'none' }}>哈哈哈， 别睡觉1231231</div>
        
      </div>
    );
  }
}

export default App;
